<script setup lang="ts">
import {ElContainer,ElAside,ElMain} from "element-plus";
import ChatInput from "./ChatInput.vue";
import {onMounted, onUnmounted, ref} from 'vue'
import './chat.scss'
import ChatPanel from "./chat-panel.vue";
import type {ChatInputDTO} from "./types";
import {messageBus} from "./hook";
import {COM_DATA, type ToolsProtocol} from './data'
import {useUserStore} from "@/store/modules/user";

const useContent=ref(false);
const store=useUserStore()
const user=store.user
const useTop=()=>{
  if (!useContent.value){
    useContent.value=true
  }
}
const chatPanel=ref<InstanceType<typeof ChatPanel>>()
const sendMsgToAi=(v:ChatInputDTO)=>{
  useTop()
  chatPanel.value?.query(v);
}
const currentTools=ref<ToolsProtocol>()
const needTools=(e:any)=>{
  currentTools.value=e as ToolsProtocol
  if (currentTools.value.active){
    setTimeout(()=>{
      if (currentTools.value?.active){
        messageBus.emit(currentTools.value.active,currentTools.value.subData)
      }
    },1000)
  }
}
onMounted(()=>{
  messageBus.on('useTools',needTools)
})
onUnmounted(()=>{
  messageBus.off('useTools',needTools)
})
</script>

<template>
  <div>
    <el-container style="height: 100%">
<!--      <el-aside style="height: 100%" width="200px">
        <aside-bar/>
      </el-aside>-->
      <el-main style="height: 100%;overflow: hidden;padding: 0">
        <el-container style="height: 100%;gap: 10px">
          <el-main class="chat-box">
            <transition name="chat-content">
              <div v-show="useContent" class="chat-content">
                <ChatPanel @close="useContent=false" ref="chatPanel" />
              </div>
            </transition>
            <transition name="chat-remark">
              <div v-show="!useContent" class="chat-remark">
                <span class="hello">欢迎，{{user?.nickname}}!</span>
                <span class="remark"> 这里是LawSeek。你的专业法律顾问。</span>
              </div>
            </transition>
            <div class="chat-input">
              <ChatInput class="chat-input-ins" @query="sendMsgToAi"/>
            </div>
            <transition name="chat-remark">
              <div v-show="!useContent" class="chat-apps">
                <el-row :gutter="20">
                  <el-col :span="6">
                    <div class="app-card">法律咨询</div>
                  </el-col>
                  <el-col :span="6">
                    <div class="app-card">案例查询</div>
                  </el-col>
                  <el-col :span="6">
                    <div class="app-card">智能写作</div>
                  </el-col>
                  <el-col :span="6">
                    <div class="app-card">合同审查</div>
                  </el-col>
                </el-row>
              </div>
            </transition>
          </el-main>
          <transition name="tools">
            <el-aside v-show="currentTools?.tools" class="chat-tools">
              <component v-if="currentTools?.component&&COM_DATA[currentTools?.component]" :is="COM_DATA[currentTools.component]" v-bind="currentTools.initData"/>
            </el-aside>
          </transition>
        </el-container>
      </el-main>
    </el-container>
  </div>
</template>

<style scoped lang="scss">
</style>
